<template>
  <div class="system-message">
    <!-- 统计信息 -->
    <div class="statistics-section">
      <div class="section-title">
        <i class="el-icon-data-analysis"></i>
        <span>发送统计</span>
      </div>
      <div class="stat-cards">
        <div class="stat-card">
          <div class="stat-icon" style="background: #409EFF;">
            <i class="el-icon-s-promotion"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.todaySent }}</div>
            <div class="stat-label">今日发送</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background: #67C23A;">
            <i class="el-icon-circle-check"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.totalSent }}</div>
            <div class="stat-label">总发送数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background: #E6A23C;">
            <i class="el-icon-view"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.readRate }}%</div>
            <div class="stat-label">已读率</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background: #909399;">
            <i class="el-icon-time"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.pendingSent }}</div>
            <div class="stat-label">待发送</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发送消息按钮 -->
    <div class="send-message-button-section">
      <el-button 
        type="primary" 
        icon="el-icon-edit" 
        size="large"
        @click="showMessageFormDialog = true"
        class="send-message-btn"
      >
        发送新消息
      </el-button>
    </div>

    <!-- 消息表单对话框 -->
    <el-dialog
      title="编辑消息"
      :visible.sync="showMessageFormDialog"
      width="95%"
      top="5vh"
      center
      :close-on-click-modal="false"
      custom-class="message-form-dialog"
    >
      <el-form ref="messageForm" :model="messageForm" :rules="formRules" label-position="top">
        <el-form-item label="消息类型" prop="type">
          <el-select v-model="messageForm.type" placeholder="请选择消息类型" style="width: 100%">
            <el-option label="紧急通知" value="紧急通知">
              <i class="el-icon-bell" style="color: #F56C6C;"></i>
              <span style="margin-left: 5px;">紧急通知</span>
            </el-option>
            <el-option label="工作指示" value="工作指示">
              <i class="el-icon-document" style="color: #E6A23C;"></i>
              <span style="margin-left: 5px;">工作指示</span>
            </el-option>
            <el-option label="信息提醒" value="信息提醒">
              <i class="el-icon-message" style="color: #409EFF;"></i>
              <span style="margin-left: 5px;">信息提醒</span>
            </el-option>
            <el-option label="系统公告" value="系统公告">
              <i class="el-icon-info" style="color: #67C23A;"></i>
              <span style="margin-left: 5px;">系统公告</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="消息标题" prop="title">
          <el-input 
            v-model="messageForm.title" 
            placeholder="请输入消息标题"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="消息内容" prop="content">
          <el-input 
            v-model="messageForm.content" 
            type="textarea" 
            placeholder="请输入消息内容"
            :rows="6"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="接收方" prop="recipients">
          <div class="recipient-selector">
            <el-button 
              type="primary" 
              plain 
              icon="el-icon-user" 
              @click="showUserSelector = true"
              style="width: 100%"
            >
              选择接收人员 (已选 {{ selectedUsers.length }} 人)
            </el-button>
          </div>
          <div v-if="selectedUsers.length > 0" class="selected-users">
            <el-tag 
              v-for="user in selectedUsers" 
              :key="user.id"
              closable
              @close="removeUser(user)"
              style="margin: 5px;"
            >
              {{ user.name }} - {{ user.role }}
            </el-tag>
          </div>
        </el-form-item>

        <el-form-item label="接收用户组" prop="recipientGroups">
          <el-checkbox-group v-model="messageForm.recipientGroups">
            <div class="group-options">
              <el-checkbox  style="margin-left: 0px"
                v-for="group in userGroups" 
                :key="group.id" 
                :label="group.id"
                border
              >
                <i :class="group.icon"></i>
                <span>{{ group.name }}</span>
                <span class="group-count">({{ group.count }}人)</span>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="优先级" prop="priority">
          <el-radio-group v-model="messageForm.priority" class="priority-radio-group">
            <el-radio-button label="高" class="priority-high">
              <i class="el-icon-warning"></i>
              <span>高优先级</span>
            </el-radio-button>
            <el-radio-button label="中" class="priority-medium">
              <i class="el-icon-info"></i>
              <span>中优先级</span>
            </el-radio-button>
            <el-radio-button label="低" class="priority-low">
              <i class="el-icon-message"></i>
              <span>低优先级</span>
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="定时发送">
          <el-switch 
            v-model="messageForm.scheduled"
            active-text="启用"
            inactive-text="禁用"
          ></el-switch>
          <el-date-picker
            v-if="messageForm.scheduled"
            v-model="messageForm.scheduledTime"
            type="datetime"
            placeholder="选择发送时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%; margin-top: 10px"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <div class="form-actions">
            <el-button @click="resetForm" style="flex: 1">重置</el-button>
            <el-button type="primary" @click="sendMessage" style="flex: 2" :loading="sending">
              <i class="el-icon-s-promotion"></i>
              {{ sending ? '发送中...' : '发送消息' }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 发送历史 -->
    <div class="history-section">
      <div class="section-title">
        <i class="el-icon-tickets"></i>
        <span>发送历史</span>
        <span class="result-count">共 {{ messageHistory.length }} 条</span>
      </div>

      <div v-if="messageHistory.length === 0" class="empty-result">
        <i class="el-icon-document-delete"></i>
        <p>暂无发送记录</p>
      </div>

      <div v-else class="message-list">
        <div 
          v-for="msg in messageHistory" 
          :key="msg.id"
          class="message-card"
          @click="viewMessageDetail(msg)"
        >
          <div class="card-header">
            <div class="message-type-row">
              <el-tag :type="getTypeTagType(msg.type)" size="mini">
                <i :class="getTypeIcon(msg.type)"></i>
                {{ msg.type }}
              </el-tag>
              <el-tag :type="getPriorityType(msg.priority)" size="mini">
                {{ msg.priority }}优先级
              </el-tag>
            </div>
            <div class="message-title">{{ msg.title }}</div>
          </div>

          <div class="card-body">
            <div class="message-content">{{ msg.content }}</div>
            <div class="info-row">
              <i class="el-icon-user"></i>
              <span>接收人数：{{ msg.recipientCount }}人</span>
            </div>
            <div class="info-row">
              <i class="el-icon-time"></i>
              <span>发送时间：{{ msg.sendTime }}</span>
            </div>
          </div>

          <div class="card-footer">
            <div class="footer-left">
              <span class="stat-item">
                <i class="el-icon-view"></i>
                已读 {{ msg.readCount }}/{{ msg.recipientCount }}
              </span>
            </div>
            <div class="footer-right">
              <el-tag :type="getStatusType(msg.status)" size="mini">
                {{ msg.status }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户选择器对话框 -->
    <el-dialog
      title="选择接收人员"
      :visible.sync="showUserSelector"
      width="95%"
      center
      :close-on-click-modal="false"
      custom-class="user-selector-dialog"
    >
      <div class="user-selector-content">
        <el-input
          v-model="userSearchKeyword"
          placeholder="搜索人员姓名、角色、部门"
          prefix-icon="el-icon-search"
          clearable
          style="margin-bottom: 15px"
        ></el-input>

        <div class="user-list">
          <div 
            v-for="user in filteredUsers" 
            :key="user.id"
            class="user-item"
            :class="{ selected: isUserSelected(user) }"
            @click="toggleUser(user)"
          >
            <div class="user-avatar" :style="{ background: user.color }">
              {{ user.name.charAt(0) }}
            </div>
            <div class="user-info">
              <div class="user-name">{{ user.name }}</div>
              <div class="user-detail">{{ user.role }} | {{ user.department }}</div>
            </div>
            <div class="user-check">
              <i v-if="isUserSelected(user)" class="el-icon-circle-check"></i>
              <i v-else class="el-icon-circle-plus-outline"></i>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUserSelector = false">取消</el-button>
        <el-button type="primary" @click="confirmUserSelection">
          确定 (已选 {{ selectedUsers.length }} 人)
        </el-button>
      </div>
    </el-dialog>

    <!-- 消息详情对话框 -->
    <el-dialog
      :title="currentMessage ? currentMessage.title : '消息详情'"
      :visible.sync="showDetailDialog"
      width="95%"
      center
      :close-on-click-modal="false"
      custom-class="detail-dialog"
    >
      <div v-if="currentMessage" class="detail-content">
        <div class="detail-section">
          <div class="detail-header">基本信息</div>
          <div class="detail-item">
            <span class="label">消息编号：</span>
            <span class="value">{{ currentMessage.id }}</span>
          </div>
          <div class="detail-item">
            <span class="label">消息类型：</span>
            <el-tag :type="getTypeTagType(currentMessage.type)" size="small">
              {{ currentMessage.type }}
            </el-tag>
          </div>
          <div class="detail-item">
            <span class="label">优先级：</span>
            <el-tag :type="getPriorityType(currentMessage.priority)" size="small">
              {{ currentMessage.priority }}
            </el-tag>
          </div>
          <div class="detail-item">
            <span class="label">发送人：</span>
            <span class="value">{{ currentMessage.sender }}</span>
          </div>
          <div class="detail-item">
            <span class="label">发送时间：</span>
            <span class="value">{{ currentMessage.sendTime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">状态：</span>
            <el-tag :type="getStatusType(currentMessage.status)" size="small">
              {{ currentMessage.status }}
            </el-tag>
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-header">消息内容</div>
          <div class="message-content-detail">{{ currentMessage.content }}</div>
        </div>

        <div class="detail-section">
          <div class="detail-header">接收统计</div>
          <div class="recipient-stats">
            <div class="recipient-stat-item">
              <div class="recipient-number">{{ currentMessage.recipientCount }}</div>
              <div class="recipient-label">接收人数</div>
            </div>
            <div class="recipient-stat-item highlight">
              <div class="recipient-number">{{ currentMessage.readCount }}</div>
              <div class="recipient-label">已读人数</div>
            </div>
            <div class="recipient-stat-item">
              <div class="recipient-number">{{ currentMessage.recipientCount - currentMessage.readCount }}</div>
              <div class="recipient-label">未读人数</div>
            </div>
          </div>
        </div>

        <div class="detail-section" v-if="currentMessage.recipients && currentMessage.recipients.length > 0">
          <div class="detail-header">接收人员列表</div>
          <div class="recipients-list">
            <div 
              v-for="(recipient, index) in currentMessage.recipients" 
              :key="index"
              class="recipient-item"
            >
              <i class="el-icon-user" style="color: #409EFF;"></i>
              <span>{{ recipient }}</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetailDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  sendSystemMessage,
  getUserList,
  getUserGroups,
  getMessageHistory,
  getMessageStatistics
} from './service';

export default {
  name: 'SystemMessage',

  data() {
    return {
      messageForm: {
        type: '',
        title: '',
        content: '',
        recipients: [],
        recipientGroups: [],
        priority: '中',
        scheduled: false,
        scheduledTime: null
      },
      
      formRules: {
        type: [
          { required: true, message: '请选择消息类型', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入消息标题', trigger: 'blur' },
          { min: 2, max: 50, message: '标题长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入消息内容', trigger: 'blur' },
          { min: 5, max: 500, message: '内容长度在 5 到 500 个字符', trigger: 'blur' }
        ]
      },

      sending: false,
      showMessageFormDialog: false,
      
      users: [],
      selectedUsers: [],
      userGroups: [],
      
      showUserSelector: false,
      userSearchKeyword: '',
      
      messageHistory: [],
      currentMessage: null,
      showDetailDialog: false,
      
      statistics: {
        todaySent: 0,
        totalSent: 0,
        readRate: 0,
        pendingSent: 0
      }
    };
  },

  computed: {
    filteredUsers() {
      if (!this.userSearchKeyword) {
        return this.users;
      }
      const keyword = this.userSearchKeyword.toLowerCase();
      return this.users.filter(user => 
        user.name.toLowerCase().includes(keyword) ||
        user.role.toLowerCase().includes(keyword) ||
        user.department.toLowerCase().includes(keyword)
      );
    }
  },

  methods: {
    // 获取消息类型图标
    getTypeIcon(type) {
      const iconMap = {
        '紧急通知': 'el-icon-bell',
        '工作指示': 'el-icon-document',
        '信息提醒': 'el-icon-message',
        '系统公告': 'el-icon-info'
      };
      return iconMap[type] || 'el-icon-message';
    },

    // 获取消息类型标签类型
    getTypeTagType(type) {
      const typeMap = {
        '紧急通知': 'danger',
        '工作指示': 'warning',
        '信息提醒': '',
        '系统公告': 'success'
      };
      return typeMap[type] || '';
    },

    // 获取优先级标签类型
    getPriorityType(priority) {
      const typeMap = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      };
      return typeMap[priority] || 'info';
    },

    // 获取状态标签类型
    getStatusType(status) {
      const typeMap = {
        '已发送': 'success',
        '发送中': 'warning',
        '待发送': 'info',
        '发送失败': 'danger'
      };
      return typeMap[status] || 'info';
    },

    // 检查用户是否已选中
    isUserSelected(user) {
      return this.selectedUsers.some(u => u.id === user.id);
    },

    // 切换用户选择状态
    toggleUser(user) {
      const index = this.selectedUsers.findIndex(u => u.id === user.id);
      if (index > -1) {
        this.selectedUsers.splice(index, 1);
      } else {
        this.selectedUsers.push(user);
      }
    },

    // 移除已选用户
    removeUser(user) {
      const index = this.selectedUsers.findIndex(u => u.id === user.id);
      if (index > -1) {
        this.selectedUsers.splice(index, 1);
      }
    },

    // 确认用户选择
    confirmUserSelection() {
      this.messageForm.recipients = this.selectedUsers.map(u => u.id);
      this.showUserSelector = false;
      this.showToast(`已选择 ${this.selectedUsers.length} 位接收人员`);
    },

    // 发送消息
    sendMessage() {
      this.$refs.messageForm.validate((valid) => {
        if (!valid) {
          this.showToast('请完善消息信息', 'warning');
          return;
        }

        // 检查接收方
        if (this.messageForm.recipients.length === 0 && this.messageForm.recipientGroups.length === 0) {
          this.showToast('请至少选择一个接收方', 'warning');
          return;
        }

        // 检查定时发送
        if (this.messageForm.scheduled && !this.messageForm.scheduledTime) {
          this.showToast('请选择定时发送时间', 'warning');
          return;
        }

        this.sending = true;

        const messageData = {
          ...this.messageForm,
          recipients: this.selectedUsers.map(u => u.name),
          recipientGroups: this.userGroups
            .filter(g => this.messageForm.recipientGroups.includes(g.id))
            .map(g => g.name)
        };

        sendSystemMessage(messageData).then(result => {
          this.sending = false;
          if (result.success) {
            this.showToast('消息发送成功');
            this.showMessageFormDialog = false;
            this.resetForm();
            this.loadMessageHistory();
            this.loadStatistics();
          }
        }).catch(error => {
          this.sending = false;
          this.showToast(error.message || '发送失败', 'error');
        });
      });
    },

    // 重置表单
    resetForm() {
      this.$refs.messageForm.resetFields();
      this.selectedUsers = [];
      this.messageForm = {
        type: '',
        title: '',
        content: '',
        recipients: [],
        recipientGroups: [],
        priority: '中',
        scheduled: false,
        scheduledTime: null
      };
    },

    // 查看消息详情
    viewMessageDetail(message) {
      this.currentMessage = message;
      this.showDetailDialog = true;
    },

    // Toast提示
    showToast(message, type = 'success') {
      this.$notify({
        title: '',
        message: message,
        type: type,
        duration: 2000,
        position: 'top-right',
        offset: 60
      });
    },

    // 加载用户列表
    loadUsers() {
      getUserList().then(data => {
        this.users = data;
      }).catch(error => {
        console.error('加载用户列表失败', error);
      });
    },

    // 加载用户组
    loadUserGroups() {
      getUserGroups().then(data => {
        this.userGroups = data;
      }).catch(error => {
        console.error('加载用户组失败', error);
      });
    },

    // 加载消息历史
    loadMessageHistory() {
      getMessageHistory().then(data => {
        this.messageHistory = data;
      }).catch(error => {
        console.error('加载消息历史失败', error);
      });
    },

    // 加载统计数据
    loadStatistics() {
      getMessageStatistics().then(data => {
        this.statistics = data;
      }).catch(error => {
        console.error('加载统计数据失败', error);
      });
    }
  },

  mounted() {
    const loading = this.$loading({
      lock: true,
      text: '加载中...',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    Promise.all([
      this.loadUsers(),
      this.loadUserGroups(),
      this.loadMessageHistory(),
      this.loadStatistics()
    ]).finally(() => {
      loading.close();
    });
  }
};
</script>

<style scoped>
.system-message {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 发送消息按钮 */
.send-message-button-section {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.send-message-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  transition: all 0.3s;
}

.send-message-btn:hover,
.send-message-btn:focus {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

.send-message-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.section-title i {
  font-size: 18px;
  margin-right: 6px;
  color: #409EFF;
}

.recipient-selector {
  margin-bottom: 10px;
}

.selected-users {
  margin-top: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  max-height: 150px;
  overflow-y: auto;
}

.group-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-options >>> .el-checkbox {
  width: 100%;
  margin: 0;
}

.group-count {
  color: #999;
  font-size: 12px;
  margin-left: 5px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* 统计信息 */
.statistics-section {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.stat-icon i {
  font-size: 20px;
  color: white;
}

.stat-info {
  width: 100%;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
}

/* 发送历史 */
.history-section {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.result-count {
  margin-left: auto;
  font-size: 13px;
  color: #999;
  font-weight: normal;
}

.empty-result {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-result i {
  font-size: 64px;
  color: #ddd;
  margin-bottom: 15px;
}

.empty-result p {
  font-size: 14px;
  margin: 0;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.message-card:active {
  transform: scale(0.98);
  border-color: #409EFF;
  background: #e7f4ff;
}

.card-header {
  margin-bottom: 12px;
}

.message-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.message-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.message-content {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.info-row {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.info-row i {
  margin-right: 6px;
  font-size: 14px;
  color: #409EFF;
  flex-shrink: 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  flex: 1;
}

.stat-item {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}

.stat-item i {
  margin-right: 4px;
  font-size: 13px;
}

/* 用户选择器对话框 */
.user-selector-content {
  max-height: 60vh;
  overflow-y: auto;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.user-item.selected {
  background: #e7f4ff;
  border-color: #409EFF;
}

.user-item:active {
  transform: scale(0.98);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  margin-left: 12px;
}

.user-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.user-detail {
  font-size: 12px;
  color: #999;
}

.user-check {
  font-size: 24px;
  color: #409EFF;
}

/* 详情对话框 */
.detail-content {
  padding: 10px 0;
}

.detail-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.detail-header {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.detail-item .label {
  color: #666;
  min-width: 90px;
  flex-shrink: 0;
}

.detail-item .value {
  color: #333;
  flex: 1;
}

.message-content-detail {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  white-space: pre-wrap;
}

.recipient-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.recipient-stat-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px 10px;
  text-align: center;
}

.recipient-stat-item.highlight {
  background: #e7f4ff;
  border: 2px solid #409EFF;
}

.recipient-number {
  font-size: 28px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 8px;
}

.recipient-label {
  font-size: 12px;
  color: #666;
}

.recipients-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.recipient-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
}

.recipient-item i {
  margin-right: 8px;
  font-size: 16px;
}

.dialog-footer {
  display: flex;
  gap: 10px;
  padding: 0;
}

.dialog-footer .el-button {
  flex: 1;
  margin: 0;
}

/* 消息表单对话框 */
.system-message >>> .message-form-dialog {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.system-message >>> .message-form-dialog .el-dialog__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  max-height: calc(90vh - 120px);
}

/* 表单样式调整 */
.system-message >>> .el-form-item__label {
  font-weight: 600;
  color: #333;
  padding: 0 0 8px 0;
}

/* 优先级按钮组样式 */
.priority-radio-group {
  width: 100%;
  display: flex;
  gap: 8px;
}

.priority-radio-group >>> .el-radio-button {
  flex: 1;
  margin: 0;
}

.priority-radio-group >>> .el-radio-button__inner {
  width: 100%;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 6px;
  transition: all 0.3s;
  font-size: 13px;
  border: 2px solid #dcdfe6;
}

.priority-radio-group >>> .el-radio-button__inner i {
  font-size: 14px;
}

.priority-radio-group >>> .el-radio-button__inner span {
  font-weight: 500;
}

/* 高优先级样式 */
.priority-high >>> .el-radio-button__inner {
  border-color: #fde2e2;
  background: #fef0f0;
}

.priority-high >>> .el-radio-button__inner i {
  color: #F56C6C;
}

.priority-high.is-active >>> .el-radio-button__inner {
  background: #F56C6C;
  border-color: #F56C6C;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.priority-high.is-active >>> .el-radio-button__inner i {
  color: white;
}

/* 中优先级样式 */
.priority-medium >>> .el-radio-button__inner {
  border-color: #faecd8;
  background: #fdf6ec;
}

.priority-medium >>> .el-radio-button__inner i {
  color: #E6A23C;
}

.priority-medium.is-active >>> .el-radio-button__inner {
  background: #E6A23C;
  border-color: #E6A23C;
  color: white;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
}

.priority-medium.is-active >>> .el-radio-button__inner i {
  color: white;
}

/* 低优先级样式 */
.priority-low >>> .el-radio-button__inner {
  border-color: #d9ecff;
  background: #ecf5ff;
}

.priority-low >>> .el-radio-button__inner i {
  color: #409EFF;
}

.priority-low.is-active >>> .el-radio-button__inner {
  background: #409EFF;
  border-color: #409EFF;
  color: white;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.priority-low.is-active >>> .el-radio-button__inner i {
  color: white;
}

/* 移除默认的radio-button首尾边框圆角限制 */
.priority-radio-group >>> .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px;
  border-left: 2px solid;
}

.priority-radio-group >>> .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 6px;
}
</style>

